<template>
  <div class="custom-card">
    <div class="card-header">
      <span>个人中心</span>
    </div>
    <div class="card-content">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户ID">
          {{ userInfo?.id }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ userInfo?.username }}
        </el-descriptions-item>
        <el-descriptions-item label="角色">
          {{ userInfo?.role === 'admin' ? '管理员' : '普通用户' }}
        </el-descriptions-item>
        <el-descriptions-item label="登录时间">
          {{ currentTime }}
        </el-descriptions-item>
        <el-descriptions-item label="Token">
          <el-text truncated>{{ accessToken?.substring(0, 30) }}...</el-text>
        </el-descriptions-item>
      </el-descriptions>

      <div style="margin-top: 20px;">
        <el-button type="danger" @click="handleLogout">退出登录</el-button>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import {computed} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessageBox, ElMessage} from 'element-plus'

const router = useRouter()

// 获取用户信息
const userInfo = computed(() => {
  const userInfoStr = localStorage.getItem('userInfo')
  return userInfoStr ? JSON.parse(userInfoStr) : null
})

// 获取Access Token
const accessToken = computed(() => {
  return localStorage.getItem('accessToken')
})

// 当前时间
const currentTime = computed(() => {
  return new Date().toLocaleString()
})

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    localStorage.removeItem('userInfo')
    localStorage.removeItem('accessToken')
    localStorage.removeItem('refreshToken')
    router.push('/login')
    ElMessage.success('已退出登录')
  }).catch(() => {
    // 取消操作
  })
}
</script>
<style scoped>
.custom-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 20px;
}
</style>
